<template>
  <main-container v-loading="result.loading">

    <el-card class="table-card">
      <template v-slot:header>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane :label="$t('server.server_dimension')" name="first"></el-tab-pane>
          <el-tab-pane :label="$t('server.rule_dimension')" name="second"></el-tab-pane>
        </el-tabs>
        <server-result-table-header :condition.sync="serverCondition" @search="search"
                      :title="$t('server.result_list')" v-if="activeName === 'first'"
                      :items="items2" :columnNames="columnNames2"
                      :checkedColumnNames="checkedColumnNames2" :checkAll="checkAll2" :isIndeterminate="isIndeterminate2"
                      @handleCheckedColumnNamesChange="handleCheckedColumnNamesChange2" @handleCheckAllChange="handleCheckAllChange2"/>
        <table-header :condition.sync="condition" @search="search"
                      :title="$t('server.result')" v-if="activeName === 'second'"
                      :items="items" :columnNames="columnNames" @delete="deleteBatch" :show-delete="true"
                      :checkedColumnNames="checkedColumnNames" :checkAll="checkAll" :isIndeterminate="isIndeterminate"
                      @handleCheckedColumnNamesChange="handleCheckedColumnNamesChange" @handleCheckAllChange="handleCheckAllChange"/>
      </template>

      <el-row :gutter="20" class="el-row-body pdfDom" v-if="activeName === 'first'">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" v-for="(data, index) in serverData"
                :key="index" class="el-col el-col-su">
          <el-card :body-style="{ padding: '15px' }">
            <div>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-row>
                    <el-col :span="16">
                      <el-tooltip class="item" effect="dark" :content="data.name" placement="top">
                          <span class="da-na" v-if="checkedColumnNames2.includes('name') && checkedColumnNames2.includes('groupName')">
                            <el-image style="border-radius: 50%;width: 16px; height: 16px; vertical-align:middle;" :src="require(`@/assets/img/platform/${data.pluginIcon}`)">
                              <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                              </div>
                            </el-image>
                            {{ $t('server.server_group') }} : {{ data.groupName }} | {{ $t('server.server_name') }} : {{ data.name }}
                          </span>
                      </el-tooltip>
                    </el-col>
                    <el-col :span="8">
                      <el-tooltip class="item" effect="dark" :content="$t('history.resource_result') + ':' + data.riskSum" placement="top">
                          <span v-if="data.riskSum > 0" style="color: red;float: right">
                            <i class="el-icon-warning"></i> {{ $t('resource.discover_risk') }}
                            <I style="color: #e8a97e;">{{ '(' + data.riskSum + ')'}}</I>
                          </span>
                        <span v-if="data.riskSum == 0" style="color: green;float: right">
                            <i class="el-icon-warning"></i> {{ $t('resource.no_risk') }}
                            <I style="color: #e8a97e;">{{ '(' + data.riskSum + ')'}}</I>
                          </span>
                      </el-tooltip>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
            <el-divider style="margin-top: 0;"></el-divider>
            <div style="padding: 0 14px 10px 14px;">
              <el-row>
                <span style="color: #1e6427;margin: 2px 0 0 0;" v-if="checkedColumnNames2.includes('ip')">{{ data.ip + ' : ' + data.port }}</span>
                <span style="margin: 2px 0 0 10px;" v-if="checkedColumnNames2.includes('resultStatus')">
                  <el-button @click="handleList(data)" plain size="mini" type="primary" v-if="data.resultStatus === 'UNCHECKED'">
                    <i class="el-icon-loading"></i> {{ $t('resource.i18n_in_process') }}
                  </el-button>
                  <el-button @click="handleList(data)" plain size="mini" type="primary" v-else-if="data.resultStatus === 'APPROVED'">
                    <i class="el-icon-loading"></i> {{ $t('resource.i18n_in_process') }}
                  </el-button>
                  <el-button @click="handleList(data)" plain size="mini" type="primary" v-else-if="data.resultStatus === 'PROCESSING'">
                    <i class="el-icon-loading"></i> {{ $t('resource.i18n_in_process') }}
                  </el-button>
                  <el-button @click="handleList(data)" plain size="mini" type="success" v-else-if="data.resultStatus === 'FINISHED'">
                    <i class="el-icon-success"></i> {{ $t('resource.i18n_done') }}
                  </el-button>
                  <el-button @click="handleList(data)" plain size="mini" type="danger" v-else-if="data.resultStatus === 'ERROR'">
                    <i class="el-icon-error"></i> {{ $t('resource.i18n_has_exception') }}
                  </el-button>
                  <el-button @click="handleList(data)" plain size="mini" type="warning" v-else-if="data.resultStatus === 'WARNING'">
                    <i class="el-icon-warning"></i> {{ $t('resource.i18n_has_warn') }}
                  </el-button>
                </span>
                <span v-if="checkedColumnNames2.includes('status')">
                  <el-tag size="mini" type="info" class="round el-btn" v-if="data.status === 'UNLINK'">
                    {{ $t('server.UNLINK') }}
                  </el-tag>
                  <el-tag size="mini" type="warning" class="round el-btn" v-else-if="data.status === 'DELETE'">
                    {{ $t('server.DELETE') }}
                  </el-tag>
                  <el-tag size="mini" type="success" class="round el-btn" v-else-if="data.status === 'VALID'">
                    {{ $t('server.VALID') }}
                  </el-tag>
                  <el-tag size="mini" type="danger" class="round el-btn" v-else-if="data.status === 'INVALID'">
                    {{ $t('server.INVALID') }}
                  </el-tag>
                </span>
                <span class="round" style="margin: 2px 0 0 5px;" v-if="checkedColumnNames2.includes('updateTime')">{{ data.updateTime | timestampFormatDate }}</span>
              </el-row>
              <span class="button time pa-na"></span>
            </div>
            <div class="bottom clearfix" style="padding: 0 14px 10px 14px;">
              <time class="time">
                <span class="pa-time" v-if="checkedColumnNames2.includes('type')">{{ $t('server.server_type') }}&nbsp;({{ data.type }})&nbsp;| &nbsp;</span>
                <span class="pa-time2" v-if="checkedColumnNames2.includes('userName')">{{ $t('server.server_user_name') }}&nbsp;({{ data.userName }})&nbsp;| &nbsp;</span>
                <span class="pa-time2" v-if="checkedColumnNames2.includes('user')">{{ $t('account.creator') }}&nbsp;({{ data.user }})&nbsp;| &nbsp;</span>
              </time>
              <el-dropdown class="button button-drop" @command="(command)=>{handleCommand(command, data)}">
                <span class="el-dropdown-link">
                  {{ $t('package.operate') }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="handleList">{{ $t('commons.detail') }}</el-dropdown-item>
                  <el-dropdown-item command="handleScans">{{ $t('commons.rescan') }}</el-dropdown-item>
                  <el-dropdown-item command="serverDelete">{{ $t('commons.delete') }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <table-pagination v-if="activeName === 'first'" :change="search" :current-page.sync="serverPage" :page-size.sync="serverSize" :total="serverTotal"/>

      <hide-table
          v-if="activeName === 'second'"
          :table-data="tableData"
          @sort-change="sort"
          @filter-change="filter"
          @select-all="select"
          @select="select"
      >
        <el-table-column type="selection" min-width="50">
        </el-table-column>
        <el-table-column type="index" min-width="40"/>
        <el-table-column prop="serverName" v-if="checkedColumnNames.includes('serverName')" :label="$t('server.server_name')" min-width="140" show-overflow-tooltip></el-table-column>
        <el-table-column prop="ip" v-if="checkedColumnNames.includes('ip')" :label="'IP'" min-width="130" show-overflow-tooltip></el-table-column>
        <el-table-column prop="ruleName" v-if="checkedColumnNames.includes('ruleName')" :label="$t('server.rule_name')" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column min-width="100" v-if="checkedColumnNames.includes('severity')" :label="$t('server.severity')" column-key="severity">
          <template v-slot:default="{row}">
            <rule-type :row="row"/>
          </template>
        </el-table-column>
        <el-table-column prop="type" v-if="checkedColumnNames.includes('type')" :label="$t('commons.type')" min-width="90" show-overflow-tooltip>
          <template v-slot:default="scope">
            <span v-if="scope.row.type === 'linux'">Linux</span>
            <span v-if="scope.row.type === 'windows'">Windows</span>
            <span v-if="!scope.row.type">N/A</span>
          </template>
        </el-table-column>
        <el-table-column v-slot:default="scope" v-if="checkedColumnNames.includes('resultStatus')" :label="$t('server.result_status')" min-width="120" prop="resultStatus" sortable show-overflow-tooltip>
          <el-button @click="showResultLog(scope.row)" plain size="mini" type="primary" v-if="scope.row.resultStatus === 'UNCHECKED'">
            <i class="el-icon-loading"></i> {{ $t('resource.i18n_in_process') }}
          </el-button>
          <el-button @click="showResultLog(scope.row)" plain size="mini" type="primary" v-else-if="scope.row.resultStatus === 'APPROVED'">
            <i class="el-icon-loading"></i> {{ $t('resource.i18n_in_process') }}
          </el-button>
          <el-button @click="showResultLog(scope.row)" plain size="mini" type="primary" v-else-if="scope.row.resultStatus === 'PROCESSING'">
            <i class="el-icon-loading"></i> {{ $t('resource.i18n_in_process') }}
          </el-button>
          <el-button @click="showResultLog(scope.row)" plain size="mini" type="success" v-else-if="scope.row.resultStatus === 'FINISHED'">
            <i class="el-icon-success"></i> {{ $t('resource.i18n_done') }}
          </el-button>
          <el-button @click="showResultLog(scope.row)" plain size="mini" type="danger" v-else-if="scope.row.resultStatus === 'ERROR'">
            <i class="el-icon-error"></i> {{ $t('resource.i18n_has_exception') }}
          </el-button>
          <el-button @click="showResultLog(scope.row)" plain size="mini" type="warning" v-else-if="scope.row.resultStatus === 'WARNING'">
            <i class="el-icon-warning"></i> {{ $t('resource.i18n_has_warn') }}
          </el-button>
        </el-table-column>
        <el-table-column prop="isSeverity" v-if="checkedColumnNames.includes('isSeverity')" :label="$t('server.is_severity')" min-width="110" show-overflow-tooltip v-slot:default="scope" sortable>
          <el-tooltip class="item" effect="dark" :content="scope.row.returnLog" placement="top">
            <span v-if="scope.row.isSeverity === 'true'" style="color: #46ad59">{{ $t('resource.risk_free') }}</span>
            <span v-if="scope.row.isSeverity === 'false'" style="color: #f84846">{{ $t('resource.risky') }}</span>
            <span v-if="scope.row.isSeverity === 'warn'" style="color: #e8a97e">{{ $t('resource.i18n_has_warn') }}</span>
          </el-tooltip>
        </el-table-column>
        <el-table-column prop="updateTime" v-if="checkedColumnNames.includes('updateTime')" min-width="160" :label="$t('server.last_modified')" sortable>
          <template v-slot:default="scope">
            <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="100" :label="$t('commons.operating')" fixed="right">
          <template v-slot:default="scope">
            <table-operators :buttons="buttons" :row="scope.row"/>
          </template>
        </el-table-column>
      </hide-table>
      <table-pagination v-if="activeName === 'second'" :change="search" :current-page.sync="currentPage" :page-size.sync="pageSize" :total="total"/>
    </el-card>

    <!--Result log-->
    <el-drawer class="rtl" :title="$t('resource.i18n_log_detail')" :visible.sync="logVisible" size="75%" :before-close="handleClose" :direction="direction"
               :destroy-on-close="true" v-loading="viewResult.loading">
      <el-row class="el-form-item-dev" v-if="logData.length == 0">
        <span>{{ $t('resource.i18n_no_data') }}<br></span>
      </el-row>
      <el-row class="el-form-item-dev" v-if="logData.length > 0">
        <div>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-light">
                <span class="grid-content-log-span">
                  {{ logForm.ruleName }}
                  <i class="el-icon-document-copy" @click="copy(logForm)" style="display: none;"></i>
                </span>
                <span class="grid-content-log-span">
                      <img :src="require(`@/assets/img/platform/${logForm.pluginIcon}`)" style="width: 16px; height: 16px; vertical-align:middle" alt=""/>
                       &nbsp;&nbsp; {{ logForm.serverGroupName }} : {{ logForm.serverName }}
                      </span>
                <span class="grid-content-status-span" v-if="logForm.resultStatus === 'APPROVED'" style="color: #579df8">
                        <i class="el-icon-loading"></i> {{ $t('resource.i18n_in_process') }}
                      </span>
                <span class="grid-content-status-span" v-else-if="logForm.resultStatus === 'FINISHED'" style="color: #7ebf50">
                        <i class="el-icon-success"></i> {{ $t('resource.i18n_done') }}
                      </span>
                <span class="grid-content-status-span" v-else-if="logForm.resultStatus === 'ERROR'" style="color: red;">
                        <i class="el-icon-error"></i> {{ $t('resource.i18n_has_exception') }}
                      </span>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple-light">
                <span class="grid-content-log-span"> {{ logForm.ruleDesc }}</span>
                <span class="grid-content-log-span">
                  {{ logForm.ip }}
                  <span v-if="logForm.isSeverity === 'true'" style="color: #46ad59">{{ $t('resource.risk_free') }}</span>
                  <span v-if="logForm.isSeverity === 'false'" style="color: #f84846">{{ $t('resource.risky') }}</span>
                  <span v-if="logForm.isSeverity === 'warn'" style="color: #e8a97e">{{ $t('resource.i18n_has_warn') }}</span>
                </span>
                <span class="grid-content-status-span">
                  <rule-type :row="logForm"/>
                </span>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-table :show-header="false" :data="logData" class="adjust-table table-content">
          <el-table-column>
            <template v-slot:default="scope">
              <div class="bg-purple-div">
                <span
                      v-bind:class="{true: 'color-red', false: ''}[scope.row.result == false]">
                      {{ scope.row.createTime | timestampFormatDate }}
                      {{ scope.row.operator }}
                      {{ scope.row.operation }}
                      {{ scope.row.output }}<br>
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-form style="margin: 15px 0 0 0">
          <h5 style="margin: 10px;">{{ $t('server.server_rule') }}</h5>
          <el-form-item>
            <codemirror ref="cmEditor" v-model="logForm.rule" class="code-mirror" :options="cmOptions" />
          </el-form-item>
          <h5 style="margin: 10px;">{{ $t('server.server_result') }}</h5>
          <el-form-item>
            <codemirror ref="cmEditor" v-model="logForm.returnLog" class="code-mirror" :options="cmOptions" />
          </el-form-item>
        </el-form>
      </el-row>
      <template v-slot:footer>
        <dialog-footer
          @cancel="logVisible = false"
          @confirm="logVisible = false"/>
      </template>
    </el-drawer>
    <!--Result log-->

    <!--Result details-->
    <el-drawer class="rtl" :title="$t('server.server_result') + $t('commons.detail')" :visible.sync="detailsVisible" size="85%" :before-close="handleClose" :direction="direction"
               :destroy-on-close="true" v-loading="viewResult.loading">
      <el-tabs v-model="detailsName" type="card">
        <el-tab-pane :label="$t('server.server_result')" name="first" v-if="server.type === 'linux'">

          <el-descriptions title="" direction="vertical" :column="3" border>
            <el-descriptions-item label="Hardening index">{{ serverLynisResult.hardeningIndex }}</el-descriptions-item>
            <el-descriptions-item label="Tests performed">{{ serverLynisResult.pluginsEnabled }}</el-descriptions-item>
            <el-descriptions-item label="Plugins enabled">{{ serverLynisResult.testsPerformed }}</el-descriptions-item>
          </el-descriptions>

          <el-table :data="serverLynisResultDetails" class="adjust-table table-content" :row-class-name="tableRowClassName">
            <!-- 展开 start -->
            <el-table-column type="expand" min-width="40" v-slot:default="scope">

              <el-table border :data="scope.row.details" class="adjust-table table-content" style="margin: 10px 50px;width: 100%;" stripe>
                <el-table-column type="index" min-width="40"/>
                <el-table-column prop="output" v-slot:default="scope" :label="$t('server.lynis_project')" min-width="200" show-overflow-tooltip>
                  {{ scope.row.output }}
                </el-table-column>
                <el-table-column prop="status" v-slot:default="scope" :label="$t('server.lynis_result')" min-width="100" show-overflow-tooltip fixed="right">
                  <span v-if="checkStatusColor(scope.row.status) === 'true'" style="color: green;">{{ $t(scope.row.status) }}</span>
                  <span v-else-if="checkStatusColor(scope.row.status) === 'false'" style="color: red;">{{ $t(scope.row.status) }}</span>
                  <span v-else-if="checkStatusColor(scope.row.status) === 'warning'" style="color: #FF8000;">{{ $t(scope.row.status) }}</span>
                  <span v-else>{{ '--' }}</span>
                </el-table-column>
              </el-table>

            </el-table-column >
            <!-- 展开 end -->
            <el-table-column type="index" min-width="40"/>
            <el-table-column prop="type" v-slot:default="scope" :label="$t('server.lynis_project_name')" min-width="200" show-overflow-tooltip>
              {{ scope.row.type }}
            </el-table-column>
            <el-table-column prop="resultSum" v-slot:default="scope" :label="$t('server.lynis_result_sum')" min-width="140" show-overflow-tooltip>
              {{ scope.row.resultSum }}
            </el-table-column>
            <el-table-column prop="riskSum" v-slot:default="scope" :label="$t('server.lynis_risk_sum')" min-width="140" show-overflow-tooltip>
              {{ scope.row.riskSum }}
            </el-table-column>
            <el-table-column prop="createTime" v-slot:default="scope" :label="$t('server.lynis_result_time')" min-width="160" show-overflow-tooltip>
              <span>{{ scope.row.createTime | timestampFormatDate }}</span>
            </el-table-column>
          </el-table>
          <el-table :data="serverLynisWarnings" style="width: 100%">
            <el-table-column min-width="600" fixed="right" v-slot:default="scope">
              <h1 v-if="scope.row.output.indexOf('Warnings') > -1" style="color: #ec6e6a;margin: 3px 0;font-size: 24px;">
                {{ "--------------------------------------------------------------------------------------------------------------" }}
                <br>
                {{ scope.row.output }}
                <br>
                {{ "--------------------------------------------------------------------------------------------------------------" }}
              </h1>
              <div v-else v-html="scope.row.output.replace(/\n/g, '<br>')" style="font-size: 14px;"></div>
            </el-table-column>
          </el-table>
          <el-table :data="serverLynisSuggestions" style="width: 100%">
            <el-table-column min-width="600" fixed="right" v-slot:default="scope">
              <h1 v-if="scope.row.output.indexOf('Suggestions') > -1" style="color: #753974;margin: 3px 0;font-size: 24px;">
                {{ "--------------------------------------------------------------------------------------------------------------" }}
                <br>
                {{ scope.row.output }}
                <br>
                {{ "--------------------------------------------------------------------------------------------------------------" }}
              </h1>
              <div v-else v-html="scope.row.output.replace(/\n/g, '<br>')" style="font-size: 14px;"></div>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="$t('server.result')" name="second">
          <el-table border :data="serverResultDetails" class="adjust-table table-content" @sort-change="sort" @filter-change="filter" @select-all="select" @select="select">
            <el-table-column type="index" min-width="40"/>
            <el-table-column prop="serverName" :label="$t('server.server_name')" min-width="140" show-overflow-tooltip></el-table-column>
            <el-table-column prop="ip" :label="'IP'" min-width="130" show-overflow-tooltip></el-table-column>
            <el-table-column prop="ruleName" :label="$t('server.rule_name')" min-width="180" show-overflow-tooltip></el-table-column>
            <el-table-column min-width="100" :label="$t('server.severity')" column-key="severity">
              <template v-slot:default="{row}">
                <rule-type :row="row"/>
              </template>
            </el-table-column>
            <el-table-column prop="type" :label="$t('commons.type')" min-width="70" show-overflow-tooltip>
              <template v-slot:default="scope">
                <span v-if="scope.row.type === 'linux'">Linux</span>
                <span v-if="scope.row.type === 'windows'">Windows</span>
                <span v-if="!scope.row.type">N/A</span>
              </template>
            </el-table-column>
            <el-table-column v-slot:default="scope" :label="$t('server.result_status')" min-width="120" prop="resultStatus" sortable show-overflow-tooltip>
              <el-button @click="showDetailLog(scope.row)" plain size="mini" type="primary" v-if="scope.row.resultStatus === 'UNCHECKED'">
                <i class="el-icon-loading"></i> {{ $t('resource.i18n_in_process') }}
              </el-button>
              <el-button @click="showDetailLog(scope.row)" plain size="mini" type="primary" v-else-if="scope.row.resultStatus === 'APPROVED'">
                <i class="el-icon-loading"></i> {{ $t('resource.i18n_in_process') }}
              </el-button>
              <el-button @click="showDetailLog(scope.row)" plain size="mini" type="primary" v-else-if="scope.row.resultStatus === 'PROCESSING'">
                <i class="el-icon-loading"></i> {{ $t('resource.i18n_in_process') }}
              </el-button>
              <el-button @click="showDetailLog(scope.row)" plain size="mini" type="success" v-else-if="scope.row.resultStatus === 'FINISHED'">
                <i class="el-icon-success"></i> {{ $t('resource.i18n_done') }}
              </el-button>
              <el-button @click="showDetailLog(scope.row)" plain size="mini" type="danger" v-else-if="scope.row.resultStatus === 'ERROR'">
                <i class="el-icon-error"></i> {{ $t('resource.i18n_has_exception') }}
              </el-button>
              <el-button @click="showDetailLog(scope.row)" plain size="mini" type="warning" v-else-if="scope.row.resultStatus === 'WARNING'">
                <i class="el-icon-warning"></i> {{ $t('resource.i18n_has_warn') }}
              </el-button>
            </el-table-column>
            <el-table-column prop="isSeverity" :label="$t('server.is_severity')" min-width="110" show-overflow-tooltip v-slot:default="scope" sortable>
              <el-tooltip class="item" effect="dark" :content="scope.row.returnLog" placement="top">
                <span v-if="scope.row.isSeverity === 'true'" style="color: #46ad59">{{ $t('resource.risk_free') }}</span>
                <span v-if="scope.row.isSeverity === 'false'" style="color: #f84846">{{ $t('resource.risky') }}</span>
                <span v-if="scope.row.isSeverity === 'warn'" style="color: #e8a97e">{{ $t('resource.i18n_has_warn') }}</span>
              </el-tooltip>
            </el-table-column>
            <el-table-column prop="updateTime" min-width="160" :label="$t('server.last_modified')" sortable>
              <template v-slot:default="scope">
                <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <!--result log-->
      <el-drawer
        size="70%"
        :title="$t('resource.i18n_log_detail')"
        :append-to-body="true"
        :before-close="innerClose"
        :visible.sync="innerVisible">
        <div class="inner-log">
          <el-row class="el-form-item-dev" v-if="logData.length == 0">
            <span>{{ $t('resource.i18n_no_data') }}<br></span>
          </el-row>
          <el-row class="el-form-item-dev" v-if="logData.length > 0">
            <div>
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple-light">
                <span class="grid-content-log-span">
                  {{ logForm.ruleName }}
                  <i class="el-icon-document-copy" @click="copy(logForm)" style="display: none;"></i>
                </span>
                    <span class="grid-content-log-span">
                      <img :src="require(`@/assets/img/platform/${logForm.pluginIcon}`)" style="width: 16px; height: 16px; vertical-align:middle" alt=""/>
                       &nbsp;&nbsp; {{ logForm.serverGroupName }} : {{ logForm.serverName }}
                      </span>
                    <span class="grid-content-status-span" v-if="logForm.resultStatus === 'APPROVED'" style="color: #579df8">
                        <i class="el-icon-loading"></i> {{ $t('resource.i18n_in_process') }}
                      </span>
                    <span class="grid-content-status-span" v-else-if="logForm.resultStatus === 'FINISHED'" style="color: #7ebf50">
                        <i class="el-icon-success"></i> {{ $t('resource.i18n_done') }}
                      </span>
                    <span class="grid-content-status-span" v-else-if="logForm.resultStatus === 'ERROR'" style="color: red;">
                        <i class="el-icon-error"></i> {{ $t('resource.i18n_has_exception') }}
                      </span>
                  </div>
                </el-col>
                <el-col :span="24">
                  <div class="grid-content bg-purple-light">
                    <span class="grid-content-log-span"> {{ logForm.ruleDesc }}</span>
                    <span class="grid-content-log-span">
                  {{ logForm.ip }}
                  <span v-if="logForm.isSeverity === 'true'" style="color: #46ad59">{{ $t('resource.risk_free') }}</span>
                  <span v-if="logForm.isSeverity === 'false'" style="color: #f84846">{{ $t('resource.risky') }}</span>
                  <span v-if="logForm.isSeverity === 'warn'" style="color: #e8a97e">{{ $t('resource.i18n_has_warn') }}</span>
                </span>
                <span class="grid-content-status-span">
                  <rule-type :row="logForm"/>
                </span>
                  </div>
                </el-col>
              </el-row>
            </div>
            <el-table :show-header="false" :data="logData" class="adjust-table table-content">
              <el-table-column>
                <template v-slot:default="scope">
                  <div class="bg-purple-div">
                <span
                  v-bind:class="{true: 'color-red', false: ''}[scope.row.result == false]">
                      {{ scope.row.createTime | timestampFormatDate }}
                      {{ scope.row.operator }}
                      {{ scope.row.operation }}
                      {{ scope.row.output }}<br>
                </span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-form style="margin: 15px 0 0 0">
              <h5 style="margin: 10px;">{{ $t('server.server_rule') }}</h5>
              <el-form-item>
                <codemirror ref="cmEditor1" v-model="logForm.rule" class="code-mirror" :options="cmOptions" />
              </el-form-item>
              <h5 style="margin: 10px;">{{ $t('server.server_result') }}</h5>
              <el-form-item>
                <codemirror ref="cmEditor2" v-model="logForm.returnLog" class="code-mirror" :options="cmOptions" />
              </el-form-item>
            </el-form>
          </el-row>
        </div>
        <dialog-footer
          @cancel="innerVisible = false"
          @confirm="innerVisible = false"/>
      </el-drawer>
      <!--result log-->

      <template v-slot:footer>
        <dialog-footer
          @cancel="detailsVisible = false"
          @confirm="detailsVisible = false"/>
      </template>
    </el-drawer>
    <!--Result details-->

  </main-container>
</template>

<script>
import TableOperators from "@/business/components/common/components/TableOperators";
import MainContainer from "@/business/components/common/components/MainContainer";
import Container from "@/business/components/common/components/Container";
import TableHeader from "@/business/components/common/components/TableHeader";
import ServerResultTableHeader from "@/business/components/server/head/ServerResultTableHeader";
import TablePagination from "@/business/components/common/pagination/TablePagination";
import TableOperator from "@/business/components/common/components/TableOperator";
import DialogFooter from "@/business/components/common/components/DialogFooter";
import {_filter, _sort} from "@/common/js/utils";
import RuleType from "./RuleType";
import {SERVER_RESULT_CONFIGS, SERVER_RESULT_CONFIGS2} from "@/business/components/common/components/search/search-components";
import {severityOptions} from "@/common/js/constants";
import HideTable from "@/business/components/common/hideTable/HideTable";
import {
  deleteServerResultByIdUrl,
  deleteServerResultsUrl,
  deleteServerResultUrl,
  getServerResultUrl,
  rescanServerUrl,
  resultServerListUrl,
  resultServerUrl,
  serverLogUrl,
  serverReScanUrl,
  serverResultListUrl
} from "@/api/k8s/server/server";

//列表展示与隐藏
const columnOptions = [
  {
    label: 'server.server_name',
    props: 'serverName',
    disabled: false
  },
  {
    label: 'IP',
    props: 'ip',
    disabled: false
  },
  {
    label: 'server.rule_name',
    props: 'ruleName',
    disabled: false
  },
  {
    label: 'server.severity',
    props: 'severity',
    disabled: false
  },
  {
    label: 'commons.type',
    props: 'type',
    disabled: false
  },
  {
    label: 'server.result_status',
    props: 'resultStatus',
    disabled: false
  },
  {
    label: 'server.is_severity',
    props: 'isSeverity',
    disabled: false
  },
  {
    label: 'server.last_modified',
    props: 'updateTime',
    disabled: false
  },
];

const columnOptions2 = [
  {
    label: 'server.server_name',
    props: 'name',
    disabled: false
  },
  {
    label: 'IP:Port',
    props: 'ip',
    disabled: false
  },
  {
    label: 'server.server_status',
    props: 'status',
    disabled: false
  },
  {
    label: 'server.server_type',
    props: 'type',
    disabled: false
  },
  {
    label: 'server.server_user_name',
    props: 'userName',
    disabled: false
  },
  {
    label: 'account.update_time',
    props: 'updateTime',
    disabled: false
  },
  {
    label: 'server.server_group',
    props: 'groupName',
    disabled: false
  },
  {
    label: 'server.result_status',
    props: 'resultStatus',
    disabled: false
  },
  {
    label: 'account.creator',
    props: 'user',
    disabled: false
  },
];

/* eslint-disable */
export default {
  components: {
    TableOperators,
    MainContainer,
    Container,
    TableHeader,
    TablePagination,
    TableOperator,
    DialogFooter,
    RuleType,
    HideTable,
    ServerResultTableHeader,
  },
  data() {
    return {
      result: {},
      viewResult: {},
      condition: {
        components: SERVER_RESULT_CONFIGS
      },
      serverCondition: {
        components: SERVER_RESULT_CONFIGS2
      },
      selectIds: new Set(),
      tableData: [],
      serverData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      serverPage: 1,
      serverSize: 10,
      serverTotal: 0,
      loading: false,
      severityOptions: [],
      direction: 'rtl',
      logVisible: false,
      logForm: {},
      logData: [],
      detailForm: {},
      buttons: [
        {
          tip: this.$t('resource.scan'), icon: "el-icon-refresh-right", type: "success",
          exec: this.handleScan
        },
        {
          tip: this.$t('resource.delete_result'), icon: "el-icon-delete", type: "danger",
          exec: this.handleDelete
        }
      ],
      cmOptions: {
        tabSize: 4,
        mode: {
          name: 'shell',
          json: true
        },
        theme: 'bespin',
        lineNumbers: true,
        line: true,
        indentWithTabs: true,
      },
      checkedColumnNames: columnOptions.map((ele) => ele.props),
      columnNames: columnOptions,
      //名称搜索
      items: [
        {
          name: 'server.server_name',
          id: 'serverName'
        },
        {
          name: 'IP',
          id: 'ip',
        },
        {
          name: 'server.rule_name',
          id: 'ruleName',
        },
      ],
      checkAll: true,
      isIndeterminate: false,
      activeName: 'first',
      checkedColumnNames2: columnOptions2.map((ele) => ele.props),
      columnNames2: columnOptions2,
      //名称搜索
      items2: [
        {
          name: 'server.server_name',
          id: 'name'
        },
        {
          name: 'IP',
          id: 'ip'
        },
        {
          name: 'Port',
          id: 'port',
        },
        {
          name: 'server.server_user_name',
          id: 'userName',
        },
      ],
      checkAll2: true,
      isIndeterminate2: false,
      serverResultDetails: [],
      detailsVisible: false,
      innerVisible: false,
      detailsName: 'first',
      serverLynisResult: {},
      serverLynisResultDetails: [],
      serverLynisWarnings: [],
      serverLynisSuggestions: [],
      server: {},
    }
  },

  methods: {
    handleCheckedColumnNamesChange(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.columnNames.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.columnNames.length;
      this.checkedColumnNames = value;
    },
    handleCheckAllChange(val) {
      this.checkedColumnNames = val ? this.columnNames.map((ele) => ele.props) : [];
      this.isIndeterminate = false;
      this.checkAll = val;
    },
    handleCheckedColumnNamesChange2(value) {
      const checkedCount = value.length;
      this.checkAll2 = checkedCount === this.columnNames2.length;
      this.isIndeterminate2 = checkedCount > 0 && checkedCount < this.columnNames2.length;
      this.checkedColumnNames2 = value;
    },
    handleCheckAllChange2(val) {
      this.checkedColumnNames2 = val ? this.columnNames2.map((ele) => ele.props) : [];
      this.isIndeterminate2 = false;
      this.checkAll2 = val;
    },
    select(selection) {
      this.selectIds.clear();
      selection.forEach(s => {
        this.selectIds.add(s.id)
      });
    },
    //查询列表
    search() {
      this.result = this.$post(serverResultListUrl + this.currentPage + "/" + this.pageSize, this.condition, response => {
        let data = response.data;
        this.total = data.itemCount;
        this.tableData = data.listObject;
      });
      this.result = this.$post(resultServerListUrl + this.serverPage + "/" + this.serverSize, this.serverCondition, response => {
        let data = response.data;
        this.serverTotal = data.itemCount;
        this.serverData = data.listObject;
      });
    },
    getStatus () {
      if (this.checkStatus(this.tableData) && this.checkStatus(this.serverData)) {
        this.search();
        clearInterval(this.timer);
      } else {
        for (let data of this.tableData) {
          this.$get(getServerResultUrl + data.id, response => {
            let result = response.data;
            if (result && data.resultStatus !== result.resultStatus) {
              data.resultStatus = result.resultStatus;
              data.returnLog = result.returnLog;
            }
          });
        }
        for (let data of this.serverData) {
          this.$get(resultServerUrl + data.id, response => {
            let result = response.data;
            if (result && data.resultStatus !== result.resultStatus) {
              data.resultStatus = result.resultStatus;
            }
          });
        }
      }
    },
    //是否是结束状态，返回false代表都在运行中，true代表已结束
    checkStatus (tableData) {
      let sum = 0;
      for (let row of tableData) {
        if (row.status != 'ERROR' && row.status != 'FINISHED' && row.status != 'WARNING') {
          sum++;
        }
      }
      return sum == 0;
    },
    severityOptionsFnc () {
      this.severityOptions = severityOptions;
    },
    init() {
      this.severityOptionsFnc();
      this.search();
    },
    sort(column) {
      _sort(column, this.condition);
      this.init();
    },
    filter(filters) {
      _filter(filters, this.condition);
      this.init();
    },
    showResultLog (result) {
      this.logForm = result;
      this.viewResult = this.$get(serverLogUrl + result.id, response => {
        this.logData = response.data;
        this.logVisible = true;
      });
      this.viewResult = this.$get(getServerResultUrl + result.id, response => {
        this.logForm = response.data;
      });
    },
    showDetailLog (result) {
      this.logForm = result;
      this.viewResult = this.$get(serverLogUrl + result.id, response => {
        this.logData = response.data;
        this.innerVisible = true;
      });
      this.viewResult = this.$get(getServerResultUrl + result.id, response => {
        this.logForm = response.data;
        //解决codemirror鼠标点击才刷新值的问题
        setTimeout(() => {
          this.$refs.cmEditor1.codemirror.refresh();
          this.$refs.cmEditor2.codemirror.refresh();
        }, 50);
      });
    },
    handleClose() {
      this.logVisible = false;
      this.detailsVisible = false;
    },
    innerClose() {
      this.innerVisible = false;
    },
    handleScan (item) {
      this.$alert(this.$t('resource.handle_scans'), '', {
        confirmButtonText: this.$t('commons.confirm'),
        callback: (action) => {
          if (action === 'confirm') {
            this.result = this.$get(serverReScanUrl + item.id, response => {
              if (response.success) {
                this.search();
              }
            });
          }
        }
      });
    },
    handleDelete(obj) {
      this.$alert(this.$t('server.delete_confirm') + this.$t('server.result') + " ？", obj.ruleName, {
        confirmButtonText: this.$t('commons.confirm'),
        callback: (action) => {
          if (action === 'confirm') {
            this.result = this.$get(deleteServerResultUrl + obj.id,  res => {
              this.search();
              this.$success(this.$t('commons.delete_success'));
            });
          }
        }
      });
    },
    copy(row) {
      let input = document.createElement("input");
      document.body.appendChild(input);
      input.value = row['command'];
      input.select();
      if (input.setSelectionRange) {
        input.setSelectionRange(0, input.value.length);
      }
      document.execCommand("copy");
      document.body.removeChild(input);
    },
    handleClick(tag) {
      this.activeName = tag.name;
    },
    handleCommand(command, data) {
      switch (command) {
        case "handleList":
          this.handleList(data);
          break;
        case "handleScans":
          this.handleScans(data);
          break;
        case "serverDelete":
          this.serverDelete(data);
          break;
        default:
          break;
      }
    },
    handleList(data) {
      this.serverResultDetails = data.serverResultDTOS;
      this.serverLynisResult = data.serverLynisResult;
      this.serverLynisResultDetails = data.serverLynisResultDetails;
      this.serverLynisWarnings = data.serverLynisWarnings;
      this.serverLynisSuggestions = data.serverLynisSuggestions;
      this.server = data;
      if (this.server.type !== 'linux') {
        this.detailsName = 'second';
      }
      this.detailsVisible = true;
    },
    deleteBatch() {
      if (this.selectIds.size === 0) {
        this.$warning(this.$t('commons.please_select') + this.$t('server.server_result'));
        return;
      }
      this.$alert(this.$t('oss.delete_batch') + this.$t('server.server_result') + " ？", '', {
        confirmButtonText: this.$t('commons.confirm'),
        callback: (action) => {
          if (action === 'confirm') {
            this.result = this.$request({
              method: 'POST',
              url: deleteServerResultsUrl,
              data: Array.from(this.selectIds),
              headers: {
                'Content-Type': undefined
              }
            }, res => {
              this.$success(this.$t('commons.success'));
              this.search();
            });
          }
        }
      });
    },
    serverDelete(obj) {
      this.$alert(this.$t('server.delete_confirm') + this.$t('server.result') + " ？", obj.ruleName, {
        confirmButtonText: this.$t('commons.confirm'),
        callback: (action) => {
          if (action === 'confirm') {
            this.result = this.$get(deleteServerResultByIdUrl + obj.id,  res => {
              this.search();
              this.$success(this.$t('commons.delete_success'));
            });
          }
        }
      });
    },
    handleScans (item) {
      this.$alert(this.$t('resource.handle_scans'), '', {
        confirmButtonText: this.$t('commons.confirm'),
        callback: (action) => {
          if (action === 'confirm') {
            this.result = this.$get(rescanServerUrl + item.id, response => {
              if (response.success) {
                this.search();
              }
            });
          }
        }
      });
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 4 === 0) {
        return 'success-row';
      } else if (rowIndex % 2 === 0) {
        return 'warning-row';
      } else {
        return '';
      }
    },
    //定义状态对应的类型
    checkStatusColor(status) {
      let trueArr = ["激活", "检查需要", "默认", "禁用", "完成", "可用", "已公开", "强化", "已安装",
      "仅限本地", "没有更新", "关闭", "正常", "开启", "部分强化", "受保护", "运行", "跳过", "更新可用", "是"];
      let falseArr = ["错误", "失败", "建议", "不安全", "弱"];
      let warningArr = ["调试", "找到文件", "找到", "中", "不是", "非默认", "没有", "未配置", "未禁用", "未启用", "没有找到", "没有运行", "未知", "警告"];
      if (trueArr.indexOf(status) > -1) {
        return "true";
      } else if (falseArr.indexOf(status) > -1) {
        return "false";
      } else if (warningArr.indexOf(status) > -1) {
        return "warning";
      } else if (status) {
        return "warning";
      }
      return "error";
    },
  },
  computed: {
    codemirror() {
      return this.$refs.cmEditor.codemirror;
    }
  },
  created() {
  },
  activated() {
    this.init();
    this.timer = setInterval(this.getStatus,10000);
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer);
  },
  destroyed() {
    this.timer && clearInterval(this.timer);
  },

}
</script>

<style scoped>
.table-content {
  width: 100%;
}
.el-form-item-dev  >>> .el-form-item__content {
  margin-left: 0 !important;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  padding: 10px 10%;
  width: 47%;
}
.tag-v{
  margin: 10px;
  cursor:pointer;
}
.rtl >>> .el-drawer__body {
  overflow-y: auto;
  padding: 20px;
}
.rtl >>> input {
  width: 100%;
}
.rtl >>> .el-select {
  width: 80%;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #f2f2f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.el-form-item-dev  >>> .el-form-item__content {
  margin-left: 0 !important;
}

.grid-content-log-span {
  width: 39%;
  float: left;
  vertical-align: middle;
  display:table-cell;
  margin: 6px 0 6px 2px;
  color: #606266;
}

.grid-content-status-span {
  width: 20%;float: left;
  vertical-align: middle;
  display:table-cell;
  margin: 6px 0;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  padding: 10px 2%;
  width: 46%;
}
.code-mirror {
  width: 100%;
}
.el-row-body >>> .el-card__body >>> .el-divider {
  margin: 5px 0;
}
.el-row-body {
  padding: 0 20px 0 20px;
  margin: 5px 0;
}
.el-row-body >>> .el-card {
  margin: 5px 0;
}
.plugin {
  color: #215d9a;
  font-size: 13px;
  margin-top: 25px;
  width: 1px;
  max-height: 110px;
  /*文字竖排显示*/
  writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/
  writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
}
.da-na {
  width: 100%;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  float: left;
  color: red;
}
.round {
  font-size: 13px;
  margin: 0 0 0 5px;
  padding: 1px 3px 1px 3px;
  float: right;
}
.time {
  font-size: 13px;
  color: #999;
}
.pa-na {
  max-width: 60%;
  white-space:nowrap;
  text-overflow:ellipsis;
  -o-text-overflow:ellipsis;
  overflow:hidden;
}
.pa-time {
  display:inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  float: left;
}
.pa-time2 {
  display:inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  float: left;
}
.button-drop {
  float: right;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-btn {
  transform: scale(0.9);
}
.inner-log {
  margin: 10px;
}

.code-mirror-lynis >>> .CodeMirror {
  /* Set height, width, borders, and global font properties here */
  height: 600px !important;
}
/deep/ :focus{outline:0;}

thead th:not(.is-hidden):last-child {
  border-left: 1px solid #EBEEF5;
}
</style>
